<template>
    <div class="header">
       <div class="header-left">
           <span class="iconfont">&#xe624;</span>
       </div>
       <div class="header-input">
           <span class="iconfont">&#xe632;</span>
           输入城市/景点/游玩主题
        </div>
        <router-link to="/city">
            <div class="header-right">
                {{city}}
                <span class="iconfont">&#xe615;</span>
            </div>
        </router-link>
    </div>
</template>


<script>
    import { mapState } from 'vuex'
    export default {
        name:'HomeHeader',
        computed:{
            ...mapState(['city'])
        }
    }
</script>

<style  lang="scss" scoped>
    @import '~styles/varibles';
    .header{
        display:flex;
        line-height:0.86rem;
        background:$bgColor;
        color:#fff;
        .header-left{
            width:0.64rem;
            float:left;
            span{
                display:block;
                text-align:center;
                font-size:0.4rem;
            }
        }
        .header-input{
            flex:1;
            height:0.64rem;
            line-height:0.64rem;
            margin-left:0.2rem;
            padding-left:0.2rem;
            margin-top:0.12rem;
            background:#fff;
            border-radius: 0.1rem;
            color:#ccc;
        }
        .header-right{
            min-width:1.04rem;
            padding:0 0.1rem;
            float:right;
            text-align:center;
            color:#fff;
            span{
                margin-left:0.04rem;
                font-size:0.24rem;
            }
        }
    }
</style>